<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>记事本</title>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
  <!-- 输入框 -->
  <header class="header">
    <h1>记事本</h1>
    <input v-model="inputMessage" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入事件"
           class="new" />
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todoList">
      <li class="todo" v-for="(item,index) in list">
        <div class="view">
          <span class="index">{{ index+1 }}.</span>
          <label>{{ item }}</label>
          <button class="destroy" @click="remove(index)"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show="list.length!=0">
      <span class="todo-count" v-if="list.length!=0">
        <strong>{{ list.length }}</strong> items left
      </span>
    <button v-show="list.length!=0" class="clear-completed" @click="clear">
      清空
    </button>
  </footer>
</section>
<script src='js/vue.js'></script>
<script src='js/note.js'></script>
</body>

</html>